<template>
    <div class="search-container">
        <el-form :model="formData" label-width="100" label-position="left">
            <el-row>
                <el-col :span="baseSpan" v-for="(item, index) in searchSchema" :key="index">
                    <el-form-item :label="item.l">
                        <el-input v-if="item.t == 'input'" v-model="formData[item.k]" placeholder="请输入" clearable  style="width: 100%;" />
                        <el-select v-else-if="item.t == 'select'" v-model="formData[item.k]" placeholder="请选择" style="width: 100%;" clearable>
                            <el-option v-for="ele in item.options" :key="ele.value" :label="ele.label"
                                :value="ele.value" />
                        </el-select>
                        <el-date-picker v-model="formData[item.k]" v-else-if="item.t == 'datetime'" style="width: 100%;" clearable
                            type="datetime" placeholder="请输入" :default-time="defaultTime" />
                    </el-form-item>
                </el-col>
                <el-col :span="buttonColSpan" align="right">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>

    </div>
</template>
<script lang="ts" setup>
import { FormType, ISearchSchemaItem } from '#/tablepage'
const props = defineProps({
    searchSchema: Array<ISearchSchemaItem>,
})
const formData = ref<FormType>({})
const defaultTime = new Date(2000, 1, 1, 0, 0, 0)
const baseSpan = 6
const buttonColSpan = computed(() => {
    if (!props.searchSchema || !props.searchSchema.length) {
        return 24
    }
    const num = props.searchSchema.length % (24 / baseSpan)
    const span = 24 - num * baseSpan
    return span
})

const emits = defineEmits(['on-search'])
const onSubmit = () => {
    emits('on-search',formData.value)
}
const onReset = () => {
    Object.keys(formData.value).forEach(item=>{
        formData.value[item] = null
    })
    emits('on-search',formData.value)
}
</script>
<style lang="scss" scoped>
.search-container {
    margin-bottom: 10px;

    .el-form-item {
        padding-left: 10px;
        margin-bottom: 10px;
    }
}
</style>
